<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级计分板 - 红蓝对战</title>
    <style>
        :root {
            --primary: #4CAF50;
            --red: #ff4757;
            --blue: #2e86de;
            --background: #f5f6fa;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }

        body {
            background: var(--background);
            min-height: 100vh;
            padding: 2rem;
        }

        /* 容器布局 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 胜利条件设置 */
        .settings {
            background: white;
            padding: 1.5rem;
            border-radius: 1rem;
            box-shadow: var(--shadow);
            margin-bottom: 2rem;
            text-align: center;
        }

        .settings label {
            font-weight: 600;
            color: #2d3436;
        }

        .settings input {
            padding: 0.8rem 1.2rem;
            border: 2px solid var(--primary);
            border-radius: 50px;
            font-size: 1.1rem;
            width: 160px;
            margin-left: 1rem;
            transition: all 0.3s;
            background: #f8f9fa;
        }

        .settings input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
        }

        /* 计分板主体 */
        .scoreboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        /* 队伍卡片 */
        .team-card {
            background: white;
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }

        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .team-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%);
        }

        /* 队伍标题 */
        .team-title {
            font-size: 1.8rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .team-title::after {
            content: '';
            position: absolute;
            bottom: -0.5rem;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: currentColor;
            border-radius: 2px;
        }

        /* 分数显示 */
        .score {
            font-size: 4rem;
            font-weight: 800;
            text-align: center;
            margin: 2rem 0;
            color: #2d3436;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .score::after {
            content: '分';
            font-size: 1.5rem;
            margin-left: 0.5rem;
            color: #636e72;
        }

        /* 输入区域 */
        .input-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 2rem 0;
        }

        .input-box {
            position: relative;
        }

        .input-box input {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 0.75rem;
            font-size: 1.1rem;
            transition: all 0.3s;
            background: #f8f9fa;
        }

        .input-box input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
        }

        .input-box input::placeholder {
            color: #b2bec3;
        }

        /* 按钮组 */
        .btn-group {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .btn {
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #45a049);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(76, 175, 80, 0.3);
        }

        .btn-danger {
            background: linear-gradient(135deg, #ff6b6b, #ee5253);
            color: white;
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(255, 107, 107, 0.3);
        }

        /* 胜利弹窗 */
        .victory-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            z-index: 1000;
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 3rem;
            border-radius: 1.5rem;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
        }

        .modal-content h2 {
            font-size: 2rem;
            color: #2ecc71;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .victory-details {
            text-align: left;
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 1rem;
            margin: 2rem 0;
        }

        .victory-details p {
            margin: 0.5rem 0;
            font-weight: 500;
            color: #2d3436;
        }

        /* 重置按钮 */
        .global-reset {
            text-align: center;
            margin-top: 2rem;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .scoreboard {
                grid-template-columns: 1fr;
            }

            .input-grid {
                grid-template-columns: 1fr;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 设置面板 -->
        <div class="settings">
            <label>🎯 胜利分数（≥1500）：
                <input type="number" id="victoryScore" value="1500" min="1500">
            </label>
        </div>

        <!-- 计分板 -->
        <div class="scoreboard">
            <!-- 红队 -->
            <div class="team-card">
                <h2 class="team-title" style="color: var(--red);">红队</h2>
                <div class="score" id="redScore">0</div>
                <div class="input-grid">
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 1" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 2" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 3" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 4" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 5" min="0">
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="confirmScore('red')">
                        <span>✅ 确认加分</span>
                    </button>
                    <button class="btn btn-danger" onclick="cancelInput('red')">
                        <span>❌ 取消输入</span>
                    </button>
                </div>
            </div>

            <!-- 蓝队 -->
            <div class="team-card">
                <h2 class="team-title" style="color: var(--blue);">蓝队</h2>
                <div class="score" id="blueScore">0</div>
                <div class="input-grid">
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 1" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 2" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 3" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 4" min="0">
                    </div>
                    <div class="input-box">
                        <input type="number" class="input-field" placeholder="加分项 5" min="0">
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="confirmScore('blue')">
                        <span>✅ 确认加分</span>
                    </button>
                    <button class="btn btn-danger" onclick="cancelInput('blue')">
                        <span>❌ 取消输入</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 全局重置 -->
        <div class="global-reset">
            <button class="btn btn-danger" onclick="resetAll()">🔄 重置所有分数</button>
        </div>

        <!-- 胜利弹窗 -->
        <div class="victory-modal" id="victoryModal">
            <div class="modal-content">
                <h2>🏆 胜利达成！</h2>
                <div class="victory-details" id="victoryDetails"></div>
                <button class="btn btn-primary" onclick="closeModal()">🎉 继续游戏</button>
            </div>
        </div>
    </div>

<script>
// 系统状态
const state = {
    red: 0,
    blue: 0,
    victoryScore: 1500
};

// 初始化事件监听
document.getElementById('victoryScore').addEventListener('change', function() {
    const value = Math.max(1500, parseInt(this.value) || 1500);
    state.victoryScore = value;
    this.value = value;
    checkVictory();
});

function confirmScore(team) {
    const inputs = document.querySelectorAll(`.team-card:nth-of-type(${team === 'red' ? 1 : 2}) .input-field`);
    const total = Array.from(inputs).reduce((sum, input) => {
        return sum + (parseInt(input.value) || 0);
    }, 0);
    
    if (total > 0) {
        state[team] += total;
        updateScoreDisplay(team);
        animateScore(team);
        checkVictory();
        clearInputs(team);
    }
}

function animateScore(team) {
    const scoreElement = document.getElementById(`${team}Score`);
    scoreElement.style.transform = 'scale(1.1)';
    setTimeout(() => {
        scoreElement.style.transform = 'scale(1)';
    }, 200);
}

function checkVictory() {
    const red = state.red;
    const blue = state.blue;
    const threshold = state.victoryScore;
    
    const winners = [];
    if (red >= threshold) winners.push('红队');
    if (blue >= threshold) winners.push('蓝队');

    if (winners.length > 0) {
        const details = document.getElementById('victoryDetails');
        details.innerHTML = `
            <p>🏅 获胜队伍：${winners.join(' 和 ')}</p>
            <p>🔴 红队分数：${red}</p>
            <p>🔵 蓝队分数：${blue}</p>
            <p>🎯 胜利条件：≥ ${threshold}分</p>
        `;
        showModal();
    }
}

function updateScoreDisplay(team) {
    document.getElementById(`${team}Score`).textContent = state[team];
}

function clearInputs(team) {
    document.querySelectorAll(`.team-card:nth-of-type(${team === 'red' ? 1 : 2}) .input-field`)
        .forEach(input => input.value = '');
}

function cancelInput(team) {
    clearInputs(team);
}

function resetAll() {
    if (confirm('确定要重置所有分数吗？')) {
        state.red = 0;
        state.blue = 0;
        document.getElementById('redScore').textContent = '0';
        document.getElementById('blueScore').textContent = '0';
        document.getElementById('victoryScore').value = '1500';
        state.victoryScore = 1500;
        closeModal();
    }
}

function showModal() {
    document.getElementById('victoryModal').style.display = 'block';
}

function closeModal() {
    document.getElementById('victoryModal').style.display = 'none';
}
</script>
</body>
</html>
